﻿<style type="text/css">
    /*法币交易下单*/
    input {-webkit-appearance:none;}
    .Place-top{background:#f9f9fc;padding: 15px; overflow: hidden;}
    .Place-top .toba-left{float: left;}
    .Place-top .toba-left h2{color:#263e56;font-size: 20px;font-weight: 700;}   
    .Place-top .toba-left .left-a{color:#7398d6;font-size: 18px;padding-top: 5px;padding-bottom: 5px;font-weight: 700; }
    .Place-top .toba-left .left-b{font-size: 13px;color: #999}
    .Place-top .toba-right{float: right;}
    .Place-top .toba-right img{display: block;width: 50px;height: 50px;}
    .Place-top .topa-bot{clear: both;padding-top: 20px;}
    .Place-top .topa-bot img{display: inline-block;width: 20px;}
    .Place-top .topa-bot span{margin-right: 10px;color:#263e56;font-size: 13px; }
    .Place-mid{height: 100px;margin: 20px 15px 10px 15px;border: 1px solid #eee}
    .Place-mid .mida-left{width:8%;height: 100px;float: left;text-align: center;}
    .Place-mid .mida-left img{height:25px;margin-top: 36px;}
    .Place-mid .mida-right{float: right;overflow: hidden;width: 92%;}
    .Place-mid .mida-right .right-a{border-bottom: 1px solid #eee;height: 50px;width: 100%;}
    .Place-mid .mida-right .right-a input{width: 53%;float: left;height: 50px;border: none;outline: none;text-indent: 10px;font-size: 15px;}
    .Place-mid .mida-right .right-a p{width: 47%;float: right;text-align: right;padding-top: 15px;}
    .mida-right .right-a p span{color:#263e56;padding-right: 8px;}
    .mida-right .right-a p a{color: #6b8bd6;border-left: 1px solid #ccc;padding-left: 8px;padding-right: 8px;}
    .Place-bottom{margin: 20px 15px 15px 15px ;}
    .Place-bottom p{color:#999;margin-bottom: 5px;}
    .Place-bottom a:nth-of-type(1){color:#7398d6;background: #ecf0f7;float: left; }
    .Place-bottom a:nth-of-type(2){float: right; }
    .Place-bottom a{width: 100%;height: 40px;line-height: 40px;background:#d1d8dd;display: inline-block;text-align: center;color: #263e56}
</style>
<div class="mv-Place" v-cloak="">
    <div class="Place-top">
        <div class="toba-left">
            <h2 v-text="titlename + bag.coincode">-</h2>
            <p class="left-a"><label v-text="bag.price">-</label>  CNY</p>
            <p class="left-b">限额 <label v-text="bag.amount_min">-</label> - <label v-text="bag.amount_max">-</label>CNY</p>
        </div>
        <div class="toba-right">
            <img :src="'/Images/Icons/coin_'+bag.coincode+'.png'" />
        </div>
        <div class="topa-bot">
            <span v-if="bag.pay_alipay"><img src="/Images/Icons/alipay.png"> 支付宝</span><span v-if="bag.pay_wechat"><img src="/Images/Icons/wechat.png"> 微信</span><span v-if="bag.pay_bank"><img src="/Images/Icons/bank.png"> 银行</span>
        </div>
    </div>
    <div class="Place-mid validate-area">
        <div class="mida-left">
            <img src="/Images/placea.png" />
        </div>
        <div class="mida-right">
            <div class="right-a">
                <input id="total" type="text" class="validate-elem" validate="true" :placeholder="请输入购买金额" validate-message="请确认购买CNY"  v-on:keyup="total_change()">
                <p><span>CNY</span></p>
            </div>
            <div class="right-a right-b">
                <input id="amount" type="text" class="validate-elem" validate="true" :placeholder="请确认购买数量" validate-message="请确认购买数量" v-on:keyup="amount_change()">
                <p><span v-text="bag.coincode">-</span></p>
            </div>
        </div>
    </div>
    <div class="Place-bottom">
        <p>请仔细核实{{titlename}}信息</p>
        <a v-on:click="submit">下单</a>
    </div>
</div>
<div style="height:60px;"></div>
<script type="text/javascript">
    var pagedata = {
        request: {
            method: "VIEW_TRANSACTION_CONTRACT",
            id: mview.view.chlid.param.id
        },
        screen: {
            header_display: true,
            header_title_name: "法币下单",
            header_exit_name: "返回",
            header_exit_click: function () {
                mview.view.load(mview.view.chlid.param.returnurl);
            },
            header_display: true,
            footer_choose: "otc"
        },
        oncreate: function () {
            if (pagedata.data.bag.type == 1) {
                pagedata.data.titlename = "购买";
            }
            else {
                pagedata.data.titlename = "出售";
            }
        },
        data: {
            titlename: '-'
        },
        methods: {
            submit: function () {
                //调用验证表单程序
                mview.view.form.validate("validate-area", function (data) {
                    mview.socket.send({
                        data: {
                            method: "TRANSACTION_CONTRACT",
                            id: mview.view.chlid.param.id,
                            total: data.total,
                            amount: data.amount,
                            price: pagedata.data.bag.price
                        },
                        success: function (data) {
                            if (data.Code == 0) {
                                mview.view.load('/views/Module/Transaction/contractdetail.html', {
                                    id: data.Data
                                });
                            }
                            else {
                                mview.control.tips(data.Message);
                            }
                        }
                    });
                });
            },
            total_change: function () {
                var total = m.view.node("#total").value();
                var amount = total / pagedata.data.bag.price;
                m.view.node("#amount").value(amount.toFixed(2))
            },
            amount_change: function () {
                var amount = m.view.node("#amount").value();
                var total = amount * pagedata.data.bag.price;
                m.view.node("#total").value(total.toFixed(2))
            },
            send_sms: function (event) {
                var elm = event.target;
                mview.custom.sms_only_send(elm);
            }
        }
    }
    mview.view.chlid.init(pagedata);
</script>